<template>
  <section class="map-info-show">
    <section class="alarmCount">
      <el-row>
        <el-col :span="6">
          今日报警
        </el-col>
        <el-col :span="6"><img src="/image/map/user.png"/>人员报警：<a style="color: red">{{userCount}}</a></el-col>
        <el-col :span="6"><img src="/image/map/car.png"/>车辆报警：<a style="color: red">{{carCount}}</a></el-col>
        <el-col :span="6"><img src="/image/map/boat.png"/>船舶报警：<a style="color: red">{{boatCount}}</a></el-col>
        <el-col :span="6"><a style="color: red">{{readSecond}}</a>秒后刷新</el-col>
      </el-row>
    </section>
    <section class="tool" v-show="true">
      <section class="tool_alarm">
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="appAlarm"><a @click="appAlarm">巡护上报</a></el-radio-button>
          <el-radio-button label="showFaultAlarm"><a @click="showFaultAlarm">群众举报</a></el-radio-button>
          <el-radio-button label="showFenceAlarm"><a @click="showFenceAlarm">渔船报警</a></el-radio-button>
          <el-radio-button label="showStudyJudgeWarning"><a @click="showStudyJudgeWarning">研判报警</a>
          </el-radio-button>
          <el-radio-button label="showTravelAlarm"><a @click="showTravelAlarm">旅游报警</a></el-radio-button>
          <!--          <el-radio-button label="top">路网报警</el-radio-button>-->
        </el-radio-group>
      </section>
    </section>
    <section class="mainMap">
      <common-map
        ref="map"
        style="height: calc(100vh - 100px)"
        :end-drag-box-handler="endDragBoxHandler"
        :isTool="true"
        :isShowData="true"
        :isSearch="true"
        :toolbarSelectVisible="true"
        :keys="keys"
        @map-click="ShowDetail"
        @marker-clearTrajectory="clearTrajectory"
        :wms-ids="wmsIds"
        :wms-grid-data="wmsGridData"
        :district-grid-data="districtGridData"
        @switchShow="switchShow"
        @handleSearch="handleSearch"
        @cancel-map-select="clearMapSelect"
      >
      </common-map>
    </section>
    <fenceAlarm-list
      :visible='showfenceAlarmListDialog'
      @close="showDetailDialog = -1"
      @showAlarmNum="showFenceAlarmNum"
      @showPoint="showPoint"
      @runStart="runStart"
      @ShowDetail="ShowDetailNew"
      ref="fenceAlarmList">
    </fenceAlarm-list>
    <faultAlarm-list
      :visible='showfaultAlarmListDialog'
      @close="showDetailDialog = -1"
      @showAlarmNum="showFaultAlarmNum"
      @showPoint="showAppPoint"
      @ShowDetail="ShowDetailNew"
      ref="faultAlarmList">
    </faultAlarm-list>
    <appEvent-list
      :visible='showAppAlarmListDialog'
      @close="showDetailDialog = -1"
      @showAppAlarmNum="showAppAlarmNum"
      @showAppPoint="showAppPoint"
      @ShowDetail="ShowDetailNew"
      ref="appEventlist">
    </appEvent-list>
    <StudyJudgeWarning-list
      :visible='showStudyJudgeWarningDialog'
      @close="showDetailDialog = -1"
      @showJudgeNum="showJudgeNum"
      @showJudgePoint="showJudgePoint"
      @ShowDetail="ShowDetailNew"
      @runHelp="runHelp"
      ref="StudyJudgeWarning">
    </StudyJudgeWarning-list>
    <TravelAlarm-list
      :visible='showTravelAlarmDialog'
      @close="showDetailDialog = -1"
      @showAlarmNum="showTravelAlarmNum"
      @showTravelAlarmPoint="showTravelAlarmPoint"
      @ShowDetail="ShowDetailNew"
      @runHelp="runHelp"
      ref="TravelAlarm">
    </TravelAlarm-list>
    <!--其他组件-->
    <car-detail
      :visible='showCarDialog'
      @close="showDetailDialog = -1"
      @updateisReadSecondShow="updateisReadSecondShow"
      :width="600"
      ref="carDetail">
    </car-detail>
    <user-detail
      :visible='showUserDialog'
      @close="showDetailDialog = -1"
      @updateisReadSecondShow="updateisReadSecondShow"
      ref="userDetail">
    </user-detail>
    <boat-detail
      :visible='showBoatDialog'
      @close="showDetailDialog = -1"
      @updateisReadSecondShow="updateisReadSecondShow"
      ref="boatDetail">
    </boat-detail>
    <fisher-detail
      :visible='showFisherDialog'
      @close="showDetailDialog = -1"
      @updateisReadSecondShow="updateisReadSecondShow"
      ref="fisherDetail">
    </fisher-detail>
    <deploy-detail
      :visible='showDeployDialog'
      @close="showDetailDialog = -1"
      ref="deployDetail">
    </deploy-detail>
    <alarm-detail
      :visible='showAlarmDetailDialog'
      @close="showDetailDialog = -1"
      ref="alarmDetail">
    </alarm-detail>
    <app-event-detail
      :visible='showAppEventDetailDialog'
      @close="showDetailDialog = -1"
      @runApp="runApp"
      ref="appEventDetail">
    </app-event-detail>
    <judge-alarm-detail
      :visible='showJudgeAlarmDetailDialog'
      @close="showDetailDialog = -1"
      ref="JudgeAlarmDetail">
    </judge-alarm-detail>
    <help-detail
      :visible='showHelpDetailDialog'
      @close="showDetailDialog = -1"
      @help="runHelp"
      ref="helpDetail">
    </help-detail>
    <tourist-detail
      :visible='showTouristDialog'
      @close="showDetailDialog = -1"
      @updateisReadSecondShow="updateisReadSecondShow"
      ref="touristDetail">
    </tourist-detail>
    <tabsBoatAndUser :runUserList="runUserList"
                     :runBoatList="runBoatList"
                     @closeDialog="closedOperation"
                     :open="isShowTabs"
                     :alarmId="alarmId"
                     :x="x"
                     :y="y"
                     :keys="keys"
                     :isSave="isSave"
                     :extent="extent"
                     @keysHandler="keysHandler"
    ></tabsBoatAndUser>
    <app-user-list :isShowUser="isShowUser"
                   :alarmId="alarmId"
                   :x="x"
                   :y="y"
                   :evtId="evtId"
                   :isEvt="isEvt"
                   :evtSource="evtSource"
                   @closeDialog="closedOperation"
    ></app-user-list>
    <event-run :open="showEvent"
               @closed="closeEvent"
               @closedAll="closeEvent"
               :receiveObjectId="receiveObjectId"
               :basicInfo="basicInfo"
    ></event-run>
    <info-box-dialog :detail="infoBoxDetail" :visible="showDetail" @closeDialog="closedOperation"></info-box-dialog>
  </section>
</template>
<script>
  import carDetail from '@/views/onemap/Detail/carDetail'
  import userDetail from '@/views/onemap/Detail/userDetail'
  import boatDetail from '@/views/onemap/Detail/boatDetail'
  import fisherDetail from '@/views/onemap/Detail/fisherDetail'
  import deployDetail from '@/views/onemap/Detail/deployDetail'
  import alarmDetail from '@/views/onemap/Detail/alarmDetail'
  import appEventDetail from '@/views/onemap/Detail/appEventDetail'
  import judgeAlarmDetail from '@/views/onemap/Detail/judgeAlarmDetail'
  import touristDetail from '@/views/onemap/Detail/touristDetail'
  import helpDetail from '@/views/onemap/Detail/helpDetail'
  import fenceAlarmList from '@/views/onemap/Alarm/fenceAlarmlist'
  import faultAlarmList from '@/views/onemap/Alarm/faultAlarmlist'
  import appEventList from '@/views/onemap/Alarm/appEventlist'
  import StudyJudgeWarningList from '@/views/onemap/Alarm/StudyJudgeWarning'
  import TravelAlarmList from '@/views/onemap/Alarm/travelAlarmlist'
  import deploymentList from '@/views/onemap/Alarm/deploymentlist'
  import {commandMapMixin} from '@/plugin/map/commandMapMixin'

  import {checkCarLimit} from '@/api/basicInformation/car'
  import {toDayCount} from '@/api/basicInformation/alarm'
  import {listFence} from '@/api/basicInformation/fence'
  import {getArea} from '@/api/basicInformation/area'
  import {currentPoint} from '@/api/basicInformation/ship'
  import tabsBoatAndUser from '@/views/onemap/List/tabsBoatAndUser'
  import appUserList from '@/views/onemap/List/appUserList'
  import {listUserCurrentPoint} from '@/api/basicInformation/appUser'
  import {listCarCurrentPoint} from '../../api/basicInformation/car'
  import {listDeployment} from '../../api/basicInformation/deployment'
  import {listHelp} from '../../api/frontierCommand/help'
  import infoBoxDialog from '@/views/onemap/components/infoBoxDialog'
  import {listTouristCurrentPoint} from '../../api/basicInformation/terminal'
  import TyCoordinateConvert from '../../plugin/map/TyCoordinateConvert'
  import store from '@/store'

  import eventRun from '@/views/onemap/List/eventRun'

  export default {
    name: 'onemap',
    mixins: [commandMapMixin],
    components: {
      carDetail,
      userDetail,
      boatDetail,
      fisherDetail,
      judgeAlarmDetail,
      helpDetail,
      fenceAlarmList,
      faultAlarmList,
      appEventList,
      StudyJudgeWarningList,
      deploymentList,
      TravelAlarmList,
      tabsBoatAndUser,
      appUserList,
      deployDetail,
      alarmDetail,
      appEventDetail,
      infoBoxDialog,
      touristDetail,
      eventRun
    },
    data() {
      return {
        labelPosition: '',
        map: null,
        keys: null,
        endDragBoxHandler: (extent, features) => {
          this.endMapSelect(extent, features)
        },
        switchCar: false,
        switchUser: false,
        switchBoat: false,
        switchFisher: false,
        switchDeploy: false,
        switchHelp: false,
        switchTourist: false,
        isShowShip: false,
        isShowCar: false,
        isShowUser: false,
        isShowTabs: false,
        carList: [],
        userList: [],
        boatList: [],
        fisherList: [],
        deploymentList: [],
        helpList: [],
        touristList: [],
        showDetailDialog: -1,
        fenceAlarmNum: 0,
        faultAlarmNum: 0,
        appAlarmNum: 0,
        judgeNum: 0,
        travelAlarmNum: 0,
        markers: [],
        wmsGridData: [],
        districtGridData: [],
        wmsIds: ['4403T_MAP_COMM_GRID.659'],
        queryParams1: {
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams2: {
          userType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams3: {
          pageNum: 1,
          pageSize: 99999,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams4: {
          shipType: '1',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams5: {
          name: undefined,
          type: undefined
        },
        queryParams6: {
          cryContent: undefined
        },
        queryParams7: {},
        runBoatList: {},
        runUserList: {},
        alarmId: 0,
        x: 0,
        y: 0,
        isSave: true,
        showDetail: false,
        infoBoxDetail: {},
        isEvt: false,
        evtId: undefined,
        evtSource: undefined,
        userCount: 0,
        carCount: 0,
        boatCount: 0,
        readSecond: 9,
        readSecondData: {},
        selectUser: false,
        showEvent: false,
        receiveObjectId: 0,
        basicInfo: {},
        isReadSecondShow: true,
        extent: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.intWmsGridData()
        this.showAlarmNum()
        this.timeStart()
      })
      checkCarLimit().then(response => {
        if (response.data) {
          this.openCarTip()
        }
      })
    },
    watch: {
      readSecond: {
        handler(val) {
          if (val === 0 && this.isReadSecondShow) {
            this.readSecondShow()
          }
        }
      }
    },
    computed: {
      showCarDialog() {
        return this.showDetailDialog === 0
      },
      showUserDialog() {
        return this.showDetailDialog === 1
      },
      showBoatDialog() {
        return this.showDetailDialog === 2
      },
      showFisherDialog() {
        return this.showDetailDialog === 3
      },
      showfenceAlarmListDialog() {
        return this.showDetailDialog === 4
      },
      showAlarmDetailDialog() {
        return this.showDetailDialog === 40
      },
      showTravelAlarmDialog() {
        return this.showDetailDialog === 50
      },
      showJudgeAlarmDetailDialog() {
        return this.showDetailDialog === 61
      },
      showAppEventDetailDialog() {
        return this.showDetailDialog === 10
      },
      showfaultAlarmListDialog() {
        return this.showDetailDialog === 5
      },
      showStudyJudgeWarningDialog() {
        return this.showDetailDialog === 6
      },
      showAppAlarmListDialog() {
        return this.showDetailDialog === 8
      },
      showDeploymentListDialog() {
        return this.showDetailDialog === 7
      },
      showDeployDialog() {
        return this.showDetailDialog === 9
      },
      showHelpDetailDialog() {
        return this.showDetailDialog === 70
      },
      showTouristDialog() {
        return this.showDetailDialog === 80
      }
    },
    methods: {
      updateisReadSecondShow(e) {
        this.isReadSecondShow = e
      },
      timeStart() {
        this.time = setInterval(this.timer, 1000)
      },
      timer() {
        if (this.readSecond <= 9 && this.readSecond > 0) {
          this.readSecond = this.readSecond - 1
        } else {
          this.readSecond = 9
        }
      },
      showAlarmNum() {
        toDayCount(1).then(response => {
          if (response.data) {
            this.userCount = response.data.userCount
            this.carCount = response.data.carCount
            this.boatCount = response.data.boatCount
          }
        })
      },
      closeEvent() {
        this.showEvent = false
        this.selectUser = false
      },
      openCarTip() {
        const h = this.$createElement
        this.$notify({
          title: '到期提醒',
          message: h('i', {style: 'color: teal'}, '有车辆使用即将到期，请前往车辆管理进行查看')
        })
      },
      intWmsGridData() {
        const data = []
        const mapDataId = store.getters && store.getters.mapDataId
        const mapDataGeom = store.getters && store.getters.mapDataGeom
        const mapDataName = store.getters && store.getters.mapDataName
        this.queryParams = {
          isShow: '0'
        }
        const that = this
        listFence(that.queryParams).then(response => {
          if (response.code == 200 && response.total > 0) {
            response.rows.forEach((item) => {
              if (item.theGeom !== null && item.theGeom !== '' && item.theGeom !== 'null')
                data.push(item.mapRange)
            })
            // console.log('mapData==============>', mapDataGeom)
            if (mapDataId !== 0) {
              try {
                const newJson = JSON.parse(mapDataGeom)
                newJson.gridName = mapDataName
                newJson.gridType = 1
                console.log('JSON.stringify(newJson)==============>', JSON.stringify(newJson))
                data.push(JSON.stringify(newJson))
                if (mapDataId === 1) {
                  that.$refs.map.map.getMap().getView().setZoom(6)
                }
              } catch (e) {
                console.log('intWmsGridData====>', e)
              }
            }
            that.wmsIds = ['4403T_MAP_COMM_GRID.659']
            that.wmsGridData = data
          }
        })

      },
      clearTrajectory() {
        this.$refs.userDetail.clearTrajectory()
        this.$refs.carDetail.clearTrajectory()
        this.$refs.boatDetail.clearTrajectory()
        this.$refs.fisherDetail.clearTrajectory()
      },
      keysHandler(e) {
        this.keys = e
      },
      handleSearch(e) {
        this.keys = e
        this.extent = []
        this.runUserList = this.queryParams2
        this.runBoatList = this.queryParams3
        this.isSave = false
        this.opendOperation('tabs')
      },
      clearMapSelect() {
        this.queryParams2.minX = 0
        this.queryParams2.minY = 0
        this.queryParams2.maxX = 0
        this.queryParams2.maxY = 0
        this.queryParams3.minX = 0
        this.queryParams3.minY = 0
        this.queryParams3.maxX = 0
        this.queryParams3.maxY = 0
      },
      endMapSelect(extent) {
        this.extent = extent
        this.runUserList = this.queryParams2
        this.runBoatList = this.queryParams3
        this.opendOperation('tabs')
      },
      showFenceAlarm() {
        this.showDetailDialog = 4
      },
      showFaultAlarm() {
        this.showDetailDialog = 5
      },
      appAlarm() {
        this.showDetailDialog = 8
      },
      showStudyJudgeWarning() {
        this.showDetailDialog = 6
      },
      showDeployment() {
        this.showDetailDialog = 7
      },
      showTravelAlarm() {
        this.showDetailDialog = 50
      },
      showFenceAlarmNum(e) {
        this.fenceAlarmNum = e
      },
      showFaultAlarmNum(e) {
        this.faultAlarmNum = e
      },
      showAppAlarmNum(e) {
        this.appAlarmNum = e
      },
      showJudgeNum(e) {
        this.judgeNum = e
      },
      showTravelAlarmNum(e) {
        this.travelAlarmNum = e
      },
      readSecondShow() {
        if (this.switchCar) {
          this.carList = []
          this.$refs.map.clearMarkerFeature('car')
          this.readSecondData.$event = true
          this.readSecondData.e = 1
          this.switchShow(this.readSecondData)
        }
        if (this.switchUser) {
          this.userList = []
          this.$refs.map.clearMarkerFeature('user')
          this.readSecondData.$event = true
          this.readSecondData.e = 2
          this.switchShow(this.readSecondData)
        }
        if (this.switchBoat) {
          this.boatList = []
          this.$refs.map.clearMarkerFeature('boat')
          this.readSecondData.$event = true
          this.readSecondData.e = 3
          this.switchShow(this.readSecondData)
        }
        if (this.switchFisher) {
          this.fisherList = []
          this.$refs.map.clearMarkerFeature('fisher')
          this.readSecondData.$event = true
          this.readSecondData.e = 4
          this.switchShow(this.readSecondData)
        }
        if (this.switchDeploy) {
          this.deploymentList = []
          this.$refs.map.clearMarkerFeature('deploy')
          this.readSecondData.$event = true
          this.readSecondData.e = 5
          this.switchShow(this.readSecondData)
        }
        if (this.switchHelp) {
          this.helpList = []
          this.$refs.map.clearMarkerFeature('help')
          this.readSecondData.$event = true
          this.readSecondData.e = 6
          this.switchShow(this.readSecondData)
        }
        if (this.switchTourist) {
          this.touristList = []
          this.$refs.map.clearMarkerFeature('tourist')
          this.readSecondData.$event = true
          this.readSecondData.e = 7
          this.switchShow(this.readSecondData)
        }
      },
      switchShow(data) {
        const e = data.e
        let gcj = {}
        let wgs84 = {}
        if (data.$event) {
          if (e == 1) {
            this.switchCar = true
            const carQuery = this.queryParams1
            carQuery.maxX = undefined
            carQuery.maxY = undefined
            carQuery.minX = undefined
            carQuery.minY = undefined
            listCarCurrentPoint(carQuery).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.licensePlate
                  arr.target = 'car'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/car.png'
                  arr.item = item
                  that.carList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.carList, false, 'car')
                // that.$refs.map.massiveFeature(that.carList, false, 'deploy')
              }
            })
          }
          if (e == 2) {
            this.switchUser = true
            const userQuery = this.queryParams2
            userQuery.maxX = undefined
            userQuery.maxY = undefined
            userQuery.minX = undefined
            userQuery.minY = undefined

            listUserCurrentPoint(userQuery).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  gcj = TyCoordinateConvert.bd_decrypt(item.y, item.x)
                  wgs84 = TyCoordinateConvert.gcj_decrypt_exact(gcj.lat, gcj.lon)
                  arr.coordinates = [wgs84.lon, wgs84.lat]
                  arr.id = item.id
                  arr.title = item.name
                  arr.target = 'user'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/user.png'
                  arr.item = item
                  that.userList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.userList, false, 'user')
                // that.$refs.map.massiveFeature(that.userList, false, 'deploy')
              }
            })
          }
          if (e == 3) {
            this.switchBoat = true
            currentPoint(this.queryParams3).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.shipName
                  arr.target = 'boat'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/boat.png'
                  arr.item = item
                  that.boatList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.boatList, false, 'boat')
                // that.$refs.map.massiveFeature(that.boatList, false, 'deploy')
              }
            })
          }
          if (e == 4) {
            this.switchFisher = true
            currentPoint(this.queryParams4).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.shipName
                  arr.target = 'fisher'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/fisher.png'
                  arr.item = item
                  that.fisherList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.fisherList, false, 'fisher')
                // that.$refs.map.massiveFeature(that.fisherList, false, 'deploy')
              }
            })
          }
          if (e == 5) {
            this.switchDeploy = true
            listDeployment(this.queryParams5).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.name
                  arr.target = 'deploy'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/' + item.type + '.png'
                  arr.item = item
                  that.deploymentList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.deploymentList, false, 'deploy')
                // that.$refs.map.massiveFeature(that.deploymentList, false, 'deploy')
              }
            })
          }
          if (e == 6) {
            this.switchHelp = true
            listHelp(this.queryParams6).then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  gcj = TyCoordinateConvert.bd_decrypt(item.y, item.x)
                  wgs84 = TyCoordinateConvert.gcj_decrypt_exact(gcj.lat, gcj.lon)
                  arr.coordinates = [wgs84.lon, wgs84.lat]
                  arr.id = item.id
                  arr.title = item.cryName
                  arr.target = 'help'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/point-red.png'
                  arr.item = item
                  that.helpList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.helpList, false, 'help')
                // that.$refs.map.massiveFeature(that.helpList, false, 'help')
              }
            })
          }
          if (e == 7) {
            this.switchTourist = true
            listTouristCurrentPoint().then(response => {
              if (response.code == 200 && response.total > 0) {
                let that = this
                let arr = {}
                response.rows.forEach((item) => {
                  arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.userName
                  arr.target = 'tourist'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.iconUrl = '/image/map/tourist.png'
                  arr.item = item
                  that.touristList.push(arr)
                })
                that.$refs.map.showMarkerFeature(that.touristList, false, 'tourist')
                // that.$refs.map.massiveFeature(that.touristList, false, 'tourist')
              }
            })
          }
        } else {
          if (e == 1) {
            this.switchCar = false
            this.carList = []
            this.$refs.map.clearMarkerFeature('car')
            // this.$refs.map.clearMarkerFeatureNew('car')
          }
          if (e == 2) {
            this.switchUser = false
            this.userList = []
            this.$refs.map.clearMarkerFeature('user')
            // this.$refs.map.clearMarkerFeatureNew('user')
          }
          if (e == 3) {
            this.switchBoat = false
            this.boatList = []
            this.$refs.map.clearMarkerFeature('boat')
            // this.$refs.map.clearMarkerFeatureNew('boat')
          }
          if (e == 4) {
            this.switchFisher = false
            this.fisherList = []
            this.$refs.map.clearMarkerFeature('fisher')
            // this.$refs.map.clearMarkerFeatureNew('fisher')
          }
          if (e == 5) {
            this.switchDeploy = false
            this.deploymentList = []
            this.$refs.map.clearMarkerFeature('deploy')
            // this.$refs.map.clearMarkerFeatureNew('deploy')
          }
          if (e == 6) {
            this.switchHelp = false
            this.helpList = []
            this.$refs.map.clearMarkerFeature('help')
            // this.$refs.map.clearMarkerFeatureNew('help')
          }
          if (e == 7) {
            this.switchTourist = false
            this.touristList = []
            this.$refs.map.clearMarkerFeature('tourist')
            // this.$refs.map.clearMarkerFeatureNew('tourist')
          }
        }
      },
      ShowDetail(e) {
        if (e) {
          if (e.target === 'car') {
            this.$refs.carDetail.handleShowCaseInfo(e, this.map)
            this.showDetailDialog = 0
          } else if (e.target === 'user') {
            if (this.selectUser) {
              this.showEvent = true
              this.basicInfo = {
                receiveObjectId: e.item.userId,
                reporterObjectName: e.item.name,
                evtSource: this.evtSource,
                x: this.x,
                y: this.y,
                alarmId: this.alarmId
              }
            } else {
              this.$refs.userDetail.handleShowCaseInfo(e, this.map)
              this.showDetailDialog = 1
            }
          } else if (e.target === 'boat') {
            this.$refs.boatDetail.handleShowCaseInfo(e, this.map)
            this.showDetailDialog = 2
          } else if (e.target === 'fisher') {
            this.$refs.fisherDetail.handleShowCaseInfo(e, this.map)
            this.showDetailDialog = 3
          } else if (e.target === 'fenceAlarm') {
            this.$refs.alarmDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 40
          } else if (e.target === 'alarm') {
            this.$refs.alarmDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 40
          } else if (e.target === 'deploy') {
            this.$refs.deployDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 9
          } else if (e.target === 'appAlarm') {
            this.$refs.appEventDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 10
          } else if (e.target === 'judgeAlarm') {
            this.$refs.JudgeAlarmDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 61
          } else if (e.target === 'help') {
            this.$refs.helpDetail.handleShowCaseInfo(e)
            this.showDetailDialog = 70
          } else if (e.target === 'tourist') {
            this.$refs.touristDetail.handleShowCaseInfo(e, this.map)
            this.showDetailDialog = 80
          }
        }
      },
      ShowDetailNew(e) {
        this.showDetail = true
        this.infoBoxDetail = e
      },
      showPoint(e, title) {
        this.markers = []
        let gcj = {}
        let wgs84 = {}
        gcj = TyCoordinateConvert.bd_decrypt(e.y, e.x)
        wgs84 = TyCoordinateConvert.gcj_decrypt_exact(gcj.lat, gcj.lon)
        this.markers.push({
          coordinates: [wgs84.lon, wgs84.lat],
          id: e.id,
          title: title ? title : '报警',
          target: e.target ? e.target : 'alarm',
          animate: true,
          stopEvent: true,
          iconUrl: '/image/map/case-red.png',
          item: e
        })
        this.$refs.map.showMarkerFeature(this.markers, false, e.target ? e.target : 'alarm')
        this.$refs.map.map.getMap().getView().animate({
          center: [e.x, e.y],
          duration: 500
        })
        document.body.click()
      },
      showAppPoint(e, title) {
        this.markers = []
        let gcj = {}
        let wgs84 = {}
        gcj = TyCoordinateConvert.bd_decrypt(e.y, e.x)
        wgs84 = TyCoordinateConvert.gcj_decrypt_exact(gcj.lat, gcj.lon)
        this.markers.push({
          coordinates: [wgs84.lon, wgs84.lat],
          id: e.id,
          title: title || '报警',
          target: 'appAlarm',
          animate: true,
          stopEvent: true,
          iconUrl: '/image/map/case-red.png',
          item: e
        })
        this.$refs.map.showMarkerFeature(this.markers, false, 'appAlarm')
        this.$refs.map.map.getMap().getView().animate({
          center: [e.x, e.y],
          duration: 500
        })
        document.body.click()
      },
      showJudgePoint(e) {
        this.markers = []
        let gcj = {}
        let wgs84 = {}
        gcj = TyCoordinateConvert.bd_decrypt(e.y, e.x)
        wgs84 = TyCoordinateConvert.gcj_decrypt_exact(gcj.lat, gcj.lon)
        this.markers.push({
          coordinates: [wgs84.lon, wgs84.lat],
          id: e.id,
          title: e.name || '报警',
          target: 'judgeAlarm',
          animate: true,
          stopEvent: true,
          iconUrl: '/image/map/case-red.png',
          item: e
        })
        this.$refs.map.showMarkerFeature(this.markers, false, 'judgeAlarm')
        this.$refs.map.map.getMap().getView().animate({
          center: [e.x, e.y],
          duration: 500
        })
        document.body.click()
      },
      showTravelAlarmPoint(e) {
        this.markers = []
        this.markers.push({
          coordinates: [e.x, e.y],
          id: e.id,
          title: e.name || '报警',
          target: 'alarm',
          animate: true,
          stopEvent: true,
          iconUrl: '/image/map/case-red.png',
          item: e
        })
        this.$refs.map.showMarkerFeature(this.markers, false, 'alarm')
        this.$refs.map.map.getMap().getView().animate({
          center: [e.x, e.y],
          duration: 500
        })
        document.body.click()
      },
      runStart(e) {
        this.alarmId = e.id
        this.x = e.x
        this.y = e.y
      },
      runHelp(e) {
        this.alarmId = e.id
        this.x = e.x
        this.y = e.y
        this.evtSource = e.evtSource
        if (e.userSelectType === 1) {
          this.opendOperation('user')
        } else {
          this.selectUser = true
        }
      },
      runApp(e) {
        this.x = e.x
        this.y = e.y
        this.evtId = e.id
        this.isEvt = true
        this.opendOperation('user')
      },
      opendOperation($event) {
        switch ($event) {
          case 'boat':
            this.isShowShip = true
            break
          case 'user':
            this.isShowUser = true
            break
          case 'car':
            this.isShowCar = true
            break
          case 'tabs':
            this.isShowTabs = true
            break
        }
      },
      closedOperation($event) {
        switch ($event) {
          case 'boat':
            this.isShowShip = false
            break
          case 'user':
            this.isShowUser = false
            this.x = 0
            this.y = 0
            this.isEvt = false
            this.evtId = undefined
            this.alarmId = 0
            break
          case 'car':
            this.isShowCar = false
            break
          case 'tabs':
            this.isShowTabs = false
            break
          case 'detail':
            this.showDetail = false
            break
        }
      },
      handleToolboxCommand(event) {
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mainMap {
    position: relative;
  }

  .alarmCount {
    height: 40px;
    position: absolute;
    z-index: 2000;
    top: 10px;
    right: 650px;
    background: #ffffff;
    border-radius: 5px;
    -webkit-box-shadow: 1px 3px 10px 0px #909399;
    box-shadow: 1px 3px 10px 0px #909399;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    .el-col-6 {
      width: auto;
      height: 100%;
      padding: 0 10px;
      line-height: 40px;
      font-size: 13px;
      color: rgb(42, 130, 228);

      img {
        width: 38px;
        height: 38px;
        display: block;
        float: left;
      }

      a {
        color: red;
      }
    }

    .el-col-6:first-child {
      border-radius: 5px;
      background-color: rgb(42, 130, 228);
      color: white;
    }
  }

  @media only screen and (min-width: 0px) and (max-width: 1830px) {
    .alarmCount {
      top: 65px;
    }
  }

  .tool {
    height: 40px;
    position: absolute;
    z-index: 2000;
    top: 10px;
    right: 10px;
    background: #ffffff;
    border-radius: 5px;
    -webkit-box-shadow: 1px 3px 10px 0px #909399;
    box-shadow: 1px 3px 10px 0px #909399;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    .dropdown, .tool_alarm {
      width: auto;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      display: -moz-flex;
      display: -o-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border-right: 1px solid #EBEEF5;
      cursor: pointer;
    }

    .tool_alarm {
      border-right: none;

      ::v-deep.el-radio-button .el-radio-button__inner {
        width: 120px;
        height: 30px;
        line-height: 30px;
        display: block;
        padding: 0;

        a {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .el-radio-group {
        margin: 4px !important;
        width: auto;
      }
    }
  }

  .el-dropdown-menu {
    padding: 10px;
    background: #eee;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.75);

    .el-dropdown-menu__item:first-child {
      padding: 0;
    }

    .el-dropdown-menu__item {
      text-align: initial;
      width: 100%;
      border-bottom: 1px solid #E4E4E4;
      background: #fff;

      ::v-deep .el-switch {
        height: 40px;
        line-height: 40px;

        .el-switch__label {
          height: auto;
          margin-right: 60px;
        }

        .el-switch__core {
          width: 70px !important;
          height: 30px;
          border-radius: 15px;
        }

        .el-switch__core:after {
          top: 2px;
          height: 24px;
          width: 24px;
        }

        .el-switch.is-checked .el-switch__core::after {
          margin-left: -25px !important;
        }
      }

      ::v-deep .el-badge {
        width: 100%;
        padding: 0;

        .el-button {
          width: 100%;
          border: 0;
        }

        .el-button:hover {
          background: none;
        }

        .el-badge__content.is-fixed {
          top: 16px;
          right: 35px;
        }
      }
    }
  }
</style>
